
<template>
	<div class="paper-wrap">
		<n-card>
			<!-- 学生信息 -->
			<div class="paper-title">
				<h2>用牛顿环测量透镜的曲率半径</h2>
				<div class="stu-info">
					<div class="stu-info-item">
						<span>学号：</span>
						<span>{{ sid }}</span>
					</div>
					<div class="stu-info-item">
						<span>姓名：</span>
						<span>{{ name }}</span>
					</div>
					<div class="stu-info-item">
						<!-- <span>班级：</span>
                        <span>{{cid}}</span> -->
					</div>
				</div>
			</div>
			<!-- 实验的基本信息 -->
			<n-divider title-placement="left">
				<h2>一、实验目的</h2>
			</n-divider>
			<div class="paper-purpose">
				<ol>
					<li>
						<el-input
							v-model="model[0].value"
							placeholder="第一条"
							@blur="getTime(0)"
						></el-input>
					</li>
					<li>
						<el-input
							v-model="model[1].value"
							placeholder="第二条"
							@blur="getTime(1)"
						></el-input>
					</li>
					<li>
						<el-input
							v-model="model[2].value"
							placeholder="第三条"
							@blur="getTime(2)"
						></el-input>
					</li>
				</ol>
			</div>
			<n-divider title-placement="left">
				<h2>二、实验仪器</h2>
			</n-divider>
			<div class="paper-instrument">
				<el-input
					v-model="model[3].value"
					placeholder="请填写需要的实验仪器"
					@blur="getTime(3)"
				></el-input>
			</div>
			<n-divider title-placement="left">
				<h2>三、实验原理</h2>
			</n-divider>
			<div class="paper-principle">
				<p class="principles"> 具体内容请参照实验指导书进行学习 </p>
			</div>

			<n-divider title-placement="left">
				<h2>四、数据记录与处理</h2>
			</n-divider>
			<div class="paper-data">
				<!-- 第一个表单 -->
				<h3> 牛顿环测量透镜的曲率半径</h3>
				<table
					border="1"
					cellpadding="2"
					style="
						width: 100%;
						border-collapse: collapse;
						border: 2px solid #000;
					"
					class="ntable"
				>
					<thead>
						<tr>
							<th>环数</th>
							<th>m</th>
							<th>20</th>
							<th>19</th>
							<th>18</th>
							<th>17</th>
							<th>16</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td rowspan="2">环的位置/mm</td>
							<td>左侧</td>
							<td
								><el-input
									v-model="model[4].value"
									class="w-50 m-2"
									@blur="getTime(4)"
							/></td>
							<td
								><el-input
									v-model="model[5].value"
									class="w-50 m-2"
									@blur="getTime(5)"
							/></td>
							<td
								><el-input
									v-model="model[6].value"
									class="w-50 m-2"
									@blur="getTime(6)"
							/></td>
							<td
								><el-input
									v-model="model[7].value"
									class="w-50 m-2"
									@blur="getTime(7)"
							/></td>
							<td
								><el-input
									v-model="model[8].value"
									class="w-50 m-2"
									@blur="getTime(8)"
							/></td>
						</tr>
						<tr>
							<td>右侧</td>
							<td
								><el-input
									v-model="model[9].value"
									class="w-50 m-2"
									@blur="getTime(9)"
							/></td>
							<td
								><el-input
									v-model="model[10].value"
									class="w-50 m-2"
									@blur="getTime(10)"
							/></td>
							<td
								><el-input
									v-model="model[11].value"
									class="w-50 m-2"
									@blur="getTime(11)"
							/></td>
							<td
								><el-input
									v-model="model[12].value"
									class="w-50 m-2"
									@blur="getTime(12)"
							/></td>
							<td
								><el-input
									v-model="model[13].value"
									class="w-50 m-2"
									@blur="getTime(13)"
							/></td>
						</tr>
						<tr>
							<td colspan="2">环的直径D<sub>m</sub>/mm</td>
							<td
								><el-input
									v-model="model[14].value"
									class="w-50 m-2"
									@blur="getTime(14)"
							/></td>
							<td
								><el-input
									v-model="model[15].value"
									class="w-50 m-2"
									@blur="getTime(15)"
							/></td>
							<td
								><el-input
									v-model="model[16].value"
									class="w-50 m-2"
									@blur="getTime(16)"
							/></td>
							<td
								><el-input
									v-model="model[17].value"
									class="w-50 m-2"
									@blur="getTime(17)"
							/></td>
							<td
								><el-input
									v-model="model[18].value"
									class="w-50 m-2"
									@blur="getTime(18)"
							/></td>
						</tr>
						<tr>
							<td>环数</td>
							<td>n</td>
							<td>10</td>
							<td>9</td>
							<td>8</td>
							<td>7</td>
							<td>6</td>
						</tr>
						<tr>
							<td rowspan="2">环的位置/mm</td>
							<td>左侧</td>
							<td
								><el-input
									v-model="model[19].value"
									class="w-50 m-2"
									@blur="getTime(19)"
							/></td>
							<td
								><el-input
									v-model="model[20].value"
									class="w-50 m-2"
									@blur="getTime(20)"
							/></td>
							<td
								><el-input
									v-model="model[21].value"
									class="w-50 m-2"
									@blur="getTime(21)"
							/></td>
							<td
								><el-input
									v-model="model[22].value"
									class="w-50 m-2"
									@blur="getTime(22)"
							/></td>
							<td
								><el-input
									v-model="model[23].value"
									class="w-50 m-2"
									@blur="getTime(23)"
							/></td>
						</tr>
						<tr>
							<td>右侧</td>
							<td
								><el-input
									v-model="model[24].value"
									class="w-50 m-2"
									@blur="getTime(24)"
							/></td>
							<td
								><el-input
									v-model="model[25].value"
									class="w-50 m-2"
									@blur="getTime(25)"
							/></td>
							<td
								><el-input
									v-model="model[26].value"
									class="w-50 m-2"
									@blur="getTime(26)"
							/></td>
							<td
								><el-input
									v-model="model[27].value"
									class="w-50 m-2"
									@blur="getTime(27)"
							/></td>
							<td
								><el-input
									v-model="model[28].value"
									class="w-50 m-2"
									@blur="getTime(28)"
							/></td>
						</tr>
						<tr>
							<td colspan="2">环的直径D<sub>n</sub>/mm</td>
							<td
								><el-input
									v-model="model[29].value"
									class="w-50 m-2"
									@blur="getTime(29)"
							/></td>
							<td
								><el-input
									v-model="model[30].value"
									class="w-50 m-2"
									@blur="getTime(30)"
							/></td>
							<td
								><el-input
									v-model="model[31].value"
									class="w-50 m-2"
									@blur="getTime(31)"
							/></td>
							<td
								><el-input
									v-model="model[32].value"
									class="w-50 m-2"
									@blur="getTime(32)"
							/></td>
							<td
								><el-input
									v-model="model[33].value"
									class="w-50 m-2"
									@blur="getTime(33)"
							/></td>
						</tr>
						<tr>
							<td colspan="2"
								>D<sub>m</sub><sup>2</sup>/mm<sup>2</sup></td
							>
							<td
								><el-input
									v-model="model[34].value"
									class="w-50 m-2"
									@blur="getTime(34)"
							/></td>
							<td
								><el-input
									v-model="model[35].value"
									class="w-50 m-2"
									@blur="getTime(35)"
							/></td>
							<td
								><el-input
									v-model="model[36].value"
									class="w-50 m-2"
									@blur="getTime(36)"
							/></td>
							<td
								><el-input
									v-model="model[37].value"
									class="w-50 m-2"
									@blur="getTime(37)"
							/></td>
							<td
								><el-input
									v-model="model[38].value"
									class="w-50 m-2"
									@blur="getTime(38)"
							/></td>
						</tr>
						<tr>
							<td colspan="2"
								>D<sub>n</sub><sup>2</sup>/mm<sup>2</sup></td
							>
							<td
								><el-input
									v-model="model[39].value"
									class="w-50 m-2"
									@blur="getTime(39)"
							/></td>
							<td
								><el-input
									v-model="model[40].value"
									class="w-50 m-2"
									@blur="getTime(40)"
							/></td>
							<td
								><el-input
									v-model="model[41].value"
									class="w-50 m-2"
									@blur="getTime(41)"
							/></td>
							<td
								><el-input
									v-model="model[42].value"
									class="w-50 m-2"
									@blur="getTime(42)"
							/></td>
							<td
								><el-input
									v-model="model[43].value"
									class="w-50 m-2"
									@blur="getTime(43)"
							/></td>
						</tr>
						<tr>
							<td colspan="2">
								<span>(</span>D<sub>m</sub><sup>2</sup>-D<sub
									>n</sub
								><sup>2</sup><span>)</span>/mm<sup>2</sup>
							</td>
							<td
								><el-input
									v-model="model[44].value"
									class="w-50 m-2"
									@blur="getTime(44)"
							/></td>
							<td
								><el-input
									v-model="model[45].value"
									class="w-50 m-2"
									@blur="getTime(45)"
							/></td>
							<td
								><el-input
									v-model="model[46].value"
									class="w-50 m-2"
									@blur="getTime(46)"
							/></td>
							<td
								><el-input
									v-model="model[47].value"
									class="w-50 m-2"
									@blur="getTime(47)"
							/></td>
							<td
								><el-input
									v-model="model[48].value"
									class="w-50 m-2"
									@blur="getTime(48)"
							/></td>
						</tr>
						<tr>
							<td colspan="2">凸透镜半径R/m</td>
							<td
								><el-input
									v-model="model[49].value"
									class="w-50 m-2"
									@blur="getTime(49)"
							/></td>
							<td
								><el-input
									v-model="model[50].value"
									class="w-50 m-2"
									@blur="getTime(50)"
							/></td>
							<td
								><el-input
									v-model="model[51].value"
									class="w-50 m-2"
									@blur="getTime(51)"
							/></td>
							<td
								><el-input
									v-model="model[52].value"
									class="w-50 m-2"
									@blur="getTime(52)"
							/></td>
							<td
								><el-input
									v-model="model[53].value"
									class="w-50 m-2"
									@blur="getTime(53)"
							/></td>
						</tr>
						<tr>
							<td colspan="2">R/m</td>
							<td colspan="5"
								><el-input
									v-model="model[54].value"
									class="w-50 m-2"
									@blur="getTime(54)"
							/></td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 第五个表单 -->
			<n-divider title-placement="left">
				<h2>五、实验分析</h2>
			</n-divider>
			<div class="paper-analyze">
				<div style="margin-bottom: 10px; font-size: 17px"
					>1..牛顿环实验是用测量暗环直径的方法来向接测量平凸透镜的曲率半径的，那么用亮环可
					以吗？为什么？</div
				>
				<el-input
					type="textarea"
					v-model="model[55].value"
					style="height: 100px"
					@blur="getTime(55)"
					resize="none"
				/>
				<div style="margin-bottom: 10px; font-size: 17px"
					>2.
					实验中观测到的于涉环中心为什么是一个圈斑而不是一个点？</div
				>
				<el-input
					type="textarea"
					v-model="model[56].value"
					style="height: 100px"
					@blur="getTime(56)"
					resize="none"
				/>
			</div>
			<div class="btn-group">
				<n-button type="info" @click="router.back()">
					保存并退出
				</n-button>
				<router-link to="/">
					<n-button type="success" @click="apply"> 提交 </n-button>
				</router-link>
			</div>
		</n-card>
	</div>
</template>
<script lang='ts' setup>
// @ts-nocheck
//16
import { ArrowDown } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { changeState, StudentgetDetailEx } from '@/api/request'
import { useGlobalStore } from '@/store/GlobalStore/index'
const store = useGlobalStore()
const route = useRoute()
const router = useRouter()
const name = store.userInfo.username
const rid = ref('')
const tid = ref('')
const sid = route.query.sid
const cid = store.userInfo.cid

const ws = new WebSocket(
	`ws://210.44.37.172:8082/message?id=${sid}&role=student`
)
ws.onopen = function (e) {
	console.log('连接成功')
}
ws.onmessage = function (e) {
	console.log(e.data, '接收返回的消息')
}
ws.onclose = function () {
	console.log('连接关闭')
}
ws.onerror = function () {
	console.log('连接出错')
}

onMounted(() => {
	console.log('组件挂载')

	rid.value = route.query.id
	tid.value = route.query.tid
	console.log('sid', sid, 'rid', rid.value, 'tid', tid.value)
	const jwtToken = localStorage.getItem('jwtToken')
	// 拿到保存的实验数据
	StudentgetDetailEx(jwtToken, 16, rid.value).then((res) => {
		console.log(res.data.data[0], 'socket数据')
		model.value.forEach((element) => {
			var obj = element
			var kid = obj.kid
			if (res.data.data[0].hasOwnProperty(kid)) {
				obj.value = res.data.data[0][kid]
				obj.timeStamp = res.data.data[0]['t' + kid]
			}
		})
	})
})
// 填每一个空的时间
const fillTime = ref([])
// 失去焦点时触发事件记录时间
const getTime = function (index) {
	console.log(model.value[index].value)
	if (model.value[index].value !== '') {
		model.value[index].timeStamp = new Date().toLocaleString()
		// const hours = parseInt(new Date().toLocaleString().match(/(\d{2}):/)[1])
		// const newHours = (hours - 5) % 24
		// const newTime = new Date(
		// 	new Date().setHours(newHours),
		// 	minutes
		// ).toLocaleString()
		// console.log(newTime, '当前时间')

		// 处理model数组的数据
		model.value = model.value.map((item) => ({
			role: 'student',
			sourceId: sid,
			rid: rid.value,
			destId: tid.value,
			eid: '3',
			kid: item.kid,
			// 返回这个对象中第一个属性的value值
			value: item.value,
			timeStamp: item.timeStamp,
		}))
		console.log('输出的', model.value)
		ws.send(
			// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"666666666"}'
			`${JSON.stringify(model.value[index])}`
		)
		console.log(model.value[index], '填的空')
	}
}
// 提交
const apply = function () {
	// console.log('提交')
	// storage()
	model.value = model.value.map((item) => ({
		rid: rid.value,
		tid: tid.value,
		kid: Object.keys(item)[0],
		// 返回这个对象中第一个属性的value值
		value: item[Object.keys(item)[0]],

		timeStamp: item.timeStamp,
	}))
	changeState(jwtToken, rid, 1).then((res) => {
		console.log(res)
	})
	console.log(model.value, '提交成功')
	ElMessage.success('提交成功')
}
const model = ref([
	{ kid: 'k1', value: '', timeStamp: '' },
	{ kid: 'k2', value: '', timeStamp: '' },
	{ kid: 'k3', value: '', timeStamp: '' },
	{ kid: 'k4', value: '', timeStamp: '' },
	{ kid: 'k5_1', value: '', timeStamp: '' },
	{ kid: 'k5_2', value: '', timeStamp: '' },
	{ kid: 'k5_3', value: '', timeStamp: '' },
	{ kid: 'k5_4', value: '', timeStamp: '' },
	{ kid: 'k5_5', value: '', timeStamp: '' },
	{ kid: 'k6_1', value: '', timeStamp: '' },
	{ kid: 'k6_2', value: '', timeStamp: '' },
	{ kid: 'k6_3', value: '', timeStamp: '' },
	{ kid: 'k6_4', value: '', timeStamp: '' },
	{ kid: 'k6_5', value: '', timeStamp: '' },
	{ kid: 'k7_1', value: '', timeStamp: '' },
	{ kid: 'k7_2', value: '', timeStamp: '' },
	{ kid: 'k7_3', value: '', timeStamp: '' },
	{ kid: 'k7_4', value: '', timeStamp: '' },
	{ kid: 'k7_5', value: '', timeStamp: '' },
	{ kid: 'k8_1', value: '', timeStamp: '' },
	{ kid: 'k8_2', value: '', timeStamp: '' },
	{ kid: 'k8_3', value: '', timeStamp: '' },
	{ kid: 'k8_4', value: '', timeStamp: '' },
	{ kid: 'k8_5', value: '', timeStamp: '' },
	{ kid: 'k9_1', value: '', timeStamp: '' },
	{ kid: 'k9_2', value: '', timeStamp: '' },
	{ kid: 'k9_3', value: '', timeStamp: '' },
	{ kid: 'k9_4', value: '', timeStamp: '' },
	{ kid: 'k9_5', value: '', timeStamp: '' },
	{ kid: 'k10_1', value: '', timeStamp: '' },
	{ kid: 'k10_2', value: '', timeStamp: '' },
	{ kid: 'k10_3', value: '', timeStamp: '' },
	{ kid: 'k10_4', value: '', timeStamp: '' },
	{ kid: 'k10_5', value: '', timeStamp: '' },
	{ kid: 'k11_1', value: '', timeStamp: '' },
	{ kid: 'k11_2', value: '', timeStamp: '' },
	{ kid: 'k11_3', value: '', timeStamp: '' },
	{ kid: 'k11_4', value: '', timeStamp: '' },
	{ kid: 'k11_5', value: '', timeStamp: '' },
	{ kid: 'k12_1', value: '', timeStamp: '' },
	{ kid: 'k12_2', value: '', timeStamp: '' },
	{ kid: 'k12_3', value: '', timeStamp: '' },
	{ kid: 'k12_4', value: '', timeStamp: '' },
	{ kid: 'k12_5', value: '', timeStamp: '' },
	{ kid: 'k13_1', value: '', timeStamp: '' },
	{ kid: 'k13_2', value: '', timeStamp: '' },
	{ kid: 'k13_3', value: '', timeStamp: '' },
	{ kid: 'k13_4', value: '', timeStamp: '' },
	{ kid: 'k13_5', value: '', timeStamp: '' },
	{ kid: 'k14_1', value: '', timeStamp: '' },
	{ kid: 'k14_2', value: '', timeStamp: '' },
	{ kid: 'k14_3', value: '', timeStamp: '' },
	{ kid: 'k14_4', value: '', timeStamp: '' },
	{ kid: 'k14_5', value: '', timeStamp: '' },
	{ kid: 'k15', value: '', timeStamp: '' },
	{ kid: 'k16', value: '', timeStamp: '' },
	{ kid: 'k17', value: '', timeStamp: '' },
])
</script>
<style lang="scss" scoped>
.example-showcase .el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
.paper-title {
	.stu-info {
		display: flex;
		align-items: center;

		.stu-info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;
		}
	}
}

.ntable {
	margin: 10px;

	thead {
		background-color: #999;

		th {
			width: 100px;
			height: 50px;
			line-height: 50px;
			border: 2px solid black;
		}
	}

	tr {
		td {
			width: 100px;
			height: 50px;
			border: 2px solid black;
		}
	}
}

.paper-purpose {
	li {
		margin-top: 10px;
	}
}

.form1 {
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px;

		.input-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.input {
				width: 100%;
			}
		}
	}
}

table {
	margin: 10px;

	tr {
		td {
			text-align: center;
			padding: 10px;

			input {
				width: 100%;
				height: 100%;
				//border: none;
				outline: none;
				text-align: center;
				box-sizing: border-box;

				&:focus {
					border-radius: 5px;
					border: 1px solid #000;
				}
			}
		}
	}
}

.btn-group {
	// 右下角
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin: 10px;

	.n-button {
		margin-left: 10px;
	}
}
</style>